import { DataTableColumns } from 'naive-ui'

const { ipcRenderer } = window.electron

export default defineComponent({
  setup() {
    const handleSend = () => {
      ipcRenderer.send('user/create', {
        name: '张三',
        age: 12,
        hobby: '篮球',
      })
    }

    const listRef = ref([])

    onMounted(() => {
      ipcRenderer.send('user/list')

      ipcRenderer.on('user/list:res', (_, data) => {
        listRef.value = data.data
      })

      ipcRenderer.on('user/create:res', () => {
        ipcRenderer.send('user/list')
      })

      ipcRenderer.on('user/delete:res', () => {
        ipcRenderer.send('user/list')
      })

      window.addEventListener('online', () => {
        console.log('online')
      })

      window.addEventListener('offline', () => {
        console.log('offline')
      })
    })

    const columns: DataTableColumns = [
      { title: '姓名', key: 'name' },
      { title: '年龄', key: 'age' },
      { title: '喜好', key: 'hobby' },
      {
        title: '操作',
        key: 'action',
        width: 60,
        render: (row) => {
          return (
            <CPopconfirmPlus
              v-slots={{
                trigger: () => (
                  <NButton text type="primary">
                    删除
                  </NButton>
                ),
              }}
              onPositiveClick={() => {
                ipcRenderer.send('user/delete', row.id)
              }}
            >
              确认删除？
            </CPopconfirmPlus>
          )
        },
      },
    ]

    return () => (
      <div class="un-ma-12px un-section">
        <NButton onClick={handleSend}>点击</NButton>
        <NDataTable class="un-mt-12px" columns={columns} data={listRef.value} />
      </div>
    )
  },
})
